<!--
 * @Date: 2022-06-29 09:25:09
 * @LastEditTime: 2022-07-14 06:48:57
-->
<template>
  <div id="hp-rank" v-loading="videos.length === 0">
    <TextRank :videosDetail="videos"/>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar'
import { getMostHotMovieList } from '@/api/movie'
import TextRank from '@/components/display/rank/TextRank.vue'
// import DisplayContainer from '@/components/display/DisplayContainer.vue'
// import StarDisplay from '@/components/display/StarDisplay.vue'
// import Homeview from '@/components/display/Homeview.vue'
// import TextRank from '@/components/TextRank.vue'
export default {
  name: 'hm',
  components: {
    NavBar,
    TextRank
    // DisplayContainer,
    // StarDisplay
    // Homeview
  },
  data: () => {
    return {
      videos: []
    }
  },
  mounted: function () {
    // console.log(videos)
    // this.videos = videos.splice(0, 10)
    // console.log(this.videos)
    getMostHotMovieList(1)
      .then(res => {
        if (res.data.state === 200) {
          for (let i = 0; i < res.data.data.length; i++) {
            this.videos.push(res.data.data[i])
          }
        }
      })
  }
}
</script>

<style>
#hp-rank {
  padding-top: 40px;
  width: 270px;
  height: 500px;
  padding-left: 30px;
}
</style>
